<template>
    <BasicModal v-bind="$attrs" @register="register" :title="getTitle" width="950px">
        <a-spin :spinning="loading" size="large" tip="Loading...">
            <a-form ref="formRef" class="antd-modal-form">
                <p style="text-align: center;">
                    <span style="width: 35%;text-align: center;font: 1.7em sans-serif;">{{ formData.labItemRecordPageList[i].itemName}}实验原始记录</span>
                </p>
                <div v-if="formData.labItemRecordPageList[i].labRecordSamList.length > 0">
                    <labSamTable ref="registerSamTable" :labRecordSamList="formData.labItemRecordPageList[i].labRecordSamList"></labSamTable>
                </div>
                <!-- <div v-if="formData.labRecordDevList.length > 0"> -->
                <labDevTable ref="registerDevTable" :labRecordDevList="formData.labItemRecordPageList[i].labRecordDevList"></labDevTable>
                <!-- </div> -->
                <div v-if="formData.labItemRecordPageList[i].labRecordNormList.length > 0">
                    <labNormTable ref="registerNormTable" :labRecordNormList="formData.labItemRecordPageList[i].labRecordNormList"></labNormTable>
                </div>
                <div v-if="formData.labItemRecordPageList[i].labRecordTargList.length > 0">
                    <labTargTable ref="registeTargTable" :labRecordTargList="formData.labItemRecordPageList[i].labRecordTargList"></labTargTable>
                </div>
                <div v-if="formData.labItemRecordPageList[i].labRecordPerList.length > 0">
                    <labPerTable ref="registerPerTable" :labRecordPerList="formData.labItemRecordPageList[i].labRecordPerList"></labPerTable>
                </div>
            </a-form>
        </a-spin>
        <template v-slot:footer>
            <a-button  type="default"  @click="closeModal">关闭</a-button>
            <a-button  type="danger"   @click="previous(i - 1)" :disabled="i === 0 ? true : false">上一个</a-button>
            <a-button  type="primary"  @click="next(i + 1)"     :disabled="i === formData.labItemRecordPageList.length - 1 ? true : false">下一个</a-button>
        </template>
    </BasicModal>
</template>
  
<script lang="ts" setup>
import { BasicModal, useModalInner } from '/@/components/Modal';
import { ref, reactive } from 'vue';
import labSamTable from './subTables/LabCheckItemsSam.vue';
import labDevTable from './subTables/LabCheckItemsDev.vue';
import labNormTable from './subTables/LabCheckItemsNorm.vue';
import labTargTable from './subTables/LabCheckItemsTarget.vue';
import labPerTable from './subTables/LabCheckItemsPerson.vue';
import { queryItemsData } from './LabItemResultList.api';

const registerSamTable = ref();
const registerDevTable = ref();
const registerNormTable = ref();
const registeTargTable = ref();
const registerPerTable = ref();
const loading = ref(true);
const i = ref(0);
const formRef = ref();
const emit = defineEmits(['success']);

const getTitle = ref('实验原始记录');
const formData = reactive<Record<string, any>>({
    entrustId: "",
    labItemRecordPageList: [{
        itemName: "",
        labRecordSamList: [],
        labRecordDevList: [],
        labRecordNormList: [],
        labRecordTargList: [],
        labRecordPerList: [],
    }],
});

const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({
        minHeight: 950,
    });
    formData.entrustId = data.record.id;
    let params = {
        entrustId: data.record.id,
    };
    queryItemsData(params).then((res) => {
        formData.labItemRecordPageList = res;
    }).finally(() => {
        loading.value = false
    })
});

//上一个
function previous(number) {
    i.value = number;
}
//下一个
function next(number) {
    i.value = number;
}



</script>
  
<style scoped>
.header {
    line-height: 35px;
    background-color: #f2f2f2;
    color: #666;
}


.tr {
    height: 50px;
    border: 1px solid #a8aeb2;
}

.thA {
    width: 20%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.thB {
    width: 30%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.thC {
    width: 8%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.thD {
    width: 32%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.thE {
    width: 25%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.thF {
    width: 75%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.input {
    border: none;
    background-color: inherit;
    outline: none;
    border-bottom: none;
}</style>